<template>
  <!-- 悬浮球 -->
  <button
    class="floating-follow"
    :class="{ active: isActive }"
    @click="toggleFollow"
    aria-label="关注按钮"
  >
    <!-- 爱心图标 -->
    <font-awesome-icon :icon="heartIcon" />
    <span class="label">{{ isActive ? '已关注' : '关注' }}</span>
  </button>
</template>

<script setup>
import { ref, computed } from 'vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faHeart as fasHeart } from '@fortawesome/free-solid-svg-icons';
import { faHeart as farHeart } from '@fortawesome/free-regular-svg-icons';

library.add(fasHeart, farHeart);

const isActive = ref(false);

const heartIcon = computed(() => (isActive.value ? ['fas', 'heart'] : ['far', 'heart']));

function toggleFollow() {
  isActive.value = !isActive.value;
  // 如果需要在外部监听状态，可在此 emit，例如：
  // emit('update:active', isActive.value);
}
</script>

<style scoped>
.floating-follow {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: var(--transition);
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
}

.floating-follow:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(67, 97, 238, 0.4);
}

.floating-follow:active {
  transform: translateY(1px);
}

.floating-follow .label {
  user-select: none;
}

.floating-follow.active {
  background: linear-gradient(135deg, var(--accent), #ff6b9c);
  box-shadow: 0 8px 20px rgba(247, 37, 133, 0.3);
}
</style>